<template>
  <div class="app-container bg-white">
    <div class="page-body">
      <el-form size="small" :model="queryForm" ref="queryFormRef" :inline="true">
        <el-form-item>
          <el-input size="small" class="width_240" placeholder="请输入订单编号" v-model.trim="queryForm.orderNo" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-select size="small" class="width_240" clearable filterable v-model="queryForm.orderStatus" placeholder="请选择交易状态">
            <el-option v-for="item in orderStatusData" :key="item.index" :label="item.name" :value="item.index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select size="small" class="width_240" clearable filterable v-model="queryForm.orderType" placeholder="请选择订单类型">
            <el-option v-for="item in orderTypeData" :key="item.index" :label="item.name" :value="item.index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select size="small" class="width_240" clearable filterable v-model="queryForm.orderMarket" placeholder="请选择营销类型">
            <el-option v-for="item in orderMarketData" :key="item.index" :label="item.name" :value="item.index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker size="small" class="width_300" v-model="queryForm.date1" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input size="small" class="width_240" placeholder="请输入商品名称" v-model.trim="queryForm.goodName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input size="small" class="width_240" placeholder="请输入商户名称" v-model.trim="queryForm.mchName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input size="small" class="width_240" placeholder="请输入店铺名称" v-model.trim="queryForm.storeName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input size="small" class="width_240" placeholder="请输入用户昵称" v-model.trim="queryForm.memberName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input size="small" class="width_240" placeholder="请输入平台单号" v-model.trim="queryForm.platName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input size="small" class="width_240" placeholder="请输入物流单号" v-model.trim="queryForm.expressName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-select size="small" class="width_240" clearable filterable v-model="queryForm.date2" placeholder="请选择开票时间">
            <el-option v-for="item in orderTimeData" :key="item.index" :label="item.name" :value="item.index"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item v-for="(item, index) in queryForm.more" :key="'query' + index">
          <div class="inline-flex">
            <el-select class="width_104" size="small" v-model="item.name" slot="prepend" placeholder="请选择查询条件">
              <el-option v-for="item in orderSearchData" :key="item.key" :label="item.name" :value="item.key"></el-option>
            </el-select>
            <el-select class="width_104" size="small" v-model="item.valid" slot="prepend" placeholder="请选择">
              <el-option v-for="item in orderValidData" :key="item.key" :label="item.name" :value="item.key"></el-option>
            </el-select>
            <el-input size="small" class="width_240" placeholder="请输入查询内容" v-model.trim="item.value"></el-input>
          </div>
        </el-form-item> -->
        <el-form-item>
          <el-button size="small" class="width_104" type="primary" @click="getPageDataList()">查询</el-button>
          <el-button size="small" class="width_104" @click="resetOption()">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="text-right">
        <div class="text-right">
          <el-button size="mini"  @click="insetputStoreOption()">批量开票导入</el-button>
          <el-button size="mini"  @click="downloadPutStoreOption()">开票模版下载</el-button>
        </div>
        <el-button size="mini" type="primary" icon="el-icon-download" @click="outputStoreOption()">批量导出</el-button>
      </div>

      <order-table class="margin_top_20" :tableData.sync="pageData" @select="getSelectList"></order-table>
        <invoice-import :invoiceVisible="invoiceVisible" @close="closeIncoice" @submit="invoiceSuccess"></invoice-import>
      <div class="text-center">
        <br>
        <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes"
          :page-size="pageSize" :layout="paginationLayout" :total="pageCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Setting from '@/settings';
import { GetOrderDataList } from '@/views/order-management/services/index';
import OrderTable from '@/views/order-management/components/table';
import invoiceImport from '@/views/order-management/components/invoiceImport';

export default {
  name: 'OrderList',
  components: {
    OrderTable,
    invoiceImport
  },
  data() {
    return {
      orderChannelData: [
        { index: 1, name: '云裳严选' },
        { index: 2, name: '洗e先生' },
        { index: 5, name: '三翼鸟阳台' }
      ],
      orderTypeData: [
        { index: 0, name: '商品订单' },
        { index: 1, name: '充值订单' },
        // { index: 2, name: '洗护服务订单' }
      ],
      orderMarketData: [
        { index: 0, name: '普通订单' },
        { index: 1, name: '分享订单' },
        { index: 2, name: '拼团订单' },
        { index: 3, name: '采销订单' }
      ],
      orderTimeData: [
        { index: 7, name: '一个周内' },
        { index: 30, name: '一个月内' },
        { index: 90, name: '三个月内' },
        { index: 180, name: '半年内' },
        { index: 365, name: '一年内' }
      ],
      orderStatusData: [
        { index: 1, name: '待付款' },
        { index: 2, name: '已付款' },
        { index: 3, name: '部分发货' },
        { index: 4, name: '已发货' },
        { index: 5, name: '已送达' },
        { index: 6, name: '已签收' },
        { index: 7, name: '已退款' },
        { index: 8, name: '已完成' },
        { index: 9, name: '已取消' }
      ],
      orderSearchData: [
        { key: 'address', name: '收货地址' },
        { key: 'phone', name: '手机号码' },
        { key: 'price', name: '支付金额' },
        { key: 'express', name: '物流公司' },
        { key: 'bill', name: '发票类型' }
      ],
      orderValidData: [
        { key: 'eq', name: '等于' },
        { key: 'gt', name: '大于' },
        { key: 'lt', name: '小于' }
      ],
      dateTime: [],
      queryForm: {
        orderNo: '',
        orderStatus: '',
        orderType: '',
        orderMarket: '',
        date1: [],
        goodName: '',
        mchName: '',
        storeName: '',
        memberName: '',
        platName: '',
        expressName: '',
        date2: '',
        more: [
          { name: '', valid: 'eq', value: '' },
          { name: '', valid: 'eq', value: '' }
        ]
      },
      pageIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      pageData: [],
      multipleSelection: [],
      pageCount: 0,
      searchData: null,
      baseImgUrl: process.env.VUE_APP_FILE_URL + '/',
      invoiceVisible:false,
      downloadUrl:`${process.env.VUE_APP_FILE_URL}/cloud-service/%E8%AE%A2%E5%8D%95%E7%BC%96%E7%A0%81%E6%A8%A1%E6%9D%BF.xlsx`
    }
  },
  filters: {
    changeOrderChannel(val) {
      if (val == 1) {
        return '云裳严选';
      } else if (val == 2) {
        return '洗e先生';
      } else if (val == 3) {
        return '三翼鸟阳台';
      } else {
        return '----';
      }
    }
  },
  methods: {
    getSelectList(selected) {
      this.multipleSelection = selected;
    },
    // 批量导出功能
    outputStoreOption() {
      const loader = this.$loading({
        lock: true,
        fullscreen: true
      });
      this.blobAxiosApi('get', '/cloudApi/order/exportOrderList', {
        ...this.searchData,
        // targetIds: this.multipleSelection.map(item => item.id).join(',')
      }, '订单导出文件.xlsx')
      .finally(() => loader.close())
    },
    // 分页操作
    handlePagingChange(event) {
      this.pageIndex = event;
      this.getPageDataList();
    },
    handleSizeChange(event) {
      this.pageIndex = 1;
      this.pageSize = event;
      this.getPageDataList();
    },
    getPageDataList() {
      this.pageData = [];
      const loader = this.$loading({
        lock: true,
        fullscreen: true
      });
      const queryData = {
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
        orderNo: this.queryForm.orderNo,
        status: this.queryForm.orderStatus,
        orderType: this.queryForm.orderType,
        marketingType: this.queryForm.orderMarket,
        payStartTime: this.queryForm.date1 && this.queryForm.date1[0] ? this.queryForm.date1[0] : '',
        payEndTime: this.queryForm.date1 && this.queryForm.date1[1] ? this.queryForm.date1[1] : '',
        goodsName: this.queryForm.goodName,
        mchName: this.queryForm.mchName,
        name: this.queryForm.memberName,
        outTradeNo: this.queryForm.platName,
        expressNo: this.queryForm.expressName,
        openInvoiceDays: this.queryForm.date2,
        storeName: this.queryForm.storeName
        // orderChannel: this.queryForm.orderChannel,
        // goodsName: this.queryForm.goodName,
      };
      this.searchData = JSON.parse(JSON.stringify(queryData));
      GetOrderDataList({...queryData})
      .finally(() => loader.close())
      .then(res => {
        if (res.code == 200) {
          this.pageData = res.data.list && res.data.list.length ? res.data.list.map(item => {
            item.collapse = true;
            item.isCheck = false;
            item.disabled = false;
            item.goodsItemList = item.goodsItemList.map(child => {
              child.goodsParams = JSON.parse(child.goodsParams).skuPropList;
              return child;
            })
            return item;
          }) : [];
          this.pageCount = res.data.total;

          if ((!res.data.list || !res.data.list.length) && this.pageIndex > 1) {
            this.pageIndex = 1;
            this.getPageDataList();
          }
        }
      })
    },
    resetOption() {
      this.queryForm = {
        orderNo: '',
        orderStatus: '',
        orderType: '',
        orderMarket: '',
        date1: [],
        goodName: '',
        mchName: '',
        storeName: '',
        memberName: '',
        platName: '',
        expressName: '',
        date2: '',
        more: [
          { name: '', valid: 'eq', value: '' },
          { name: '', valid: 'eq', value: '' }
        ]
      };
      this.getPageDataList();
    },
    cellSpanValid({ row, column, rowIndex, columnIndex }) {
      if (row.goodsItemList && row.goodsItemList.length) {
        return [1, 7];
      } else {
        return [1, 1];
      }
    },
    insetputStoreOption(){
        this.invoiceVisible = true
    },
    closeIncoice(){
      this.invoiceVisible = false
    },
    invoiceSuccess(){
      this.pageIndex = 1;
      this.getPageDataList();
      this.invoiceVisible = false
    },
    downloadPutStoreOption(){
      window.open(this.downloadUrl)
    }
  },
  created() {
    this.getPageDataList();
  }
}
</script>

<style scoped lang="scss">
  .cell_header {
    width: calc(100% - 30px);
    justify-content: space-between;
    display: inline-flex;

    > div {
      flex: 1;
      display: inline-block;
    }
  }

  .goodsDetail {
    width: calc(100% - 36px);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    img {
      width: 64px;
      height: 64px;
      flex: 0 0 64px;
      margin-right: 5px;
      vertical-align: middle;
    }

    > div {
      flex: 1;
      width: calc(100% - 69px);
      display: inline-flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }

.width_104 {
  width: 104px;
}

.width_240 {
  width: 240px;
}

.width_300 {
  width: 300px;
}

::v-deep .el-table__row.expanded {
  height: 48px;
}
  .text-right{
    display: flex;
    justify-content: space-between;
  }
</style>
